<template>
<view v-if="detailObj">
<view class="thumb">
    <image mode="aspectFill" :src="detailObj.thumb"></image>
    <view class="tag">{{detailObj.category}}</view>
</view>
<view class="title">{{detailObj.name}}</view>
<view class="time_num flex">
    <view class="time">
        <text>{{detailObj.startTime}}-{{detailObj.finishTime}}</text>
        <image class="over" mode="scaleToFill" src="/static/images/icon_over.png" v-if="cannotSign&&isSignUp!=0"></image>
    </view>
    <view class="num">已报名 <text>{{detailObj.bnum}}</text>/{{detailObj.need}}</view>
</view>
<view @tap="toOrgDetail" class="desc_item flex" :data-dept-id="detailObj.orgId" :data-dept-name="detailObj.orgName">
    <image class="icon" mode="scaleToFill" src="/static/images/icon_desc_org.png"></image>
    <view>
        <text>{{detailObj.orgName}}</text>
        <image class="arr" src="/static/images/icon_arrow_gray.png"></image>
    </view>
</view>
<view @tap="makePhoneCall" class="desc_item flex" :data-mobile="detailObj.lxPhone">
    <image class="icon" mode="scaleToFill" src="/static/images/icon_desc_name.png"></image>
    <view>
        <text>{{detailObj.lxr}}</text>
        <image class="fun_icon" src="/static/images/icon_desc_phone.png"></image>
    </view>
</view>
<view @tap="openLocation" class="desc_item flex" :data-address="detailObj.detailAddress" :data-name-txt="detailObj.name" :data-position="detailObj.posiitonQQMap">
    <image class="icon" mode="scaleToFill" src="/static/images/icon_desc_locate.png"></image>
    <view>
        <text>{{detailObj.detailAddress}}</text>
        <image class="fun_icon" src="/static/images/icon_desc_distance.png"></image>
    </view>
</view>
<view class="split"></view>
<view class="content">
    <view class="tit">活动详情</view>
    <view class="border_sec">
        <image class="quot" src="/static/images/quot.png"></image>
        <rich-text :nodes="detailObj.context" v-if="detailObj.context"></rich-text>
        <view class="no_data" v-else>
            <image class="no_data1" src="/static/images/icon_detail.png"></image>
            <text>暂无活动详情</text>
        </view>
    </view>
</view>
<view class="split"></view>
<view class="content" v-if="detailObj">
    <view class="tit">
    报名志愿者
    <text class="sub" v-if="detailObj.bnum">{{detailObj.bnum}}</text>
        <view @tap="allVols" class="more" v-if="tools.length(detailObj.users)">
      报名详情
      <image mode="scaleToFill" src="/static/images/icon_arrow_gray.png"></image>
        </view>
    </view>
    <view class="no_data" v-if="!tools.length(detailObj.users)">
        <image class="no_data1" src="/static/images/icon_detail.png"></image>
        <text>期待您的报名</text>
    </view>
    <view class="vols_wrapper flex" v-else>
        <view v-for="(item, idx) in detailObj.users" :key="idx" class="vols_item" v-if="idx<6">
            <image class="headimg" :src="item.headImage?item.headImage:'/static/images/defaultorg.png'"></image>
            <view class="star_wrapper flex" v-if="item.star!==0">
                <view v-for="(item, index) in tools.star(item.star)" :key="index" class="star">
                    <image src="/static/images/icon_star.png"></image>
                </view>
            </view>
        </view>
    </view>
</view>
<view class="split"></view>
<view class="content" style="display: none">
    <view class="tit">留言</view>
    <view class="no_data" v-if="!dialogList||dialogList.length==0">
        <image class="no_data2" src="/static/images/icon_dialog.png"></image>
        <text>期待您的留言</text>
    </view>
    <view v-for="(item, idx) in dialogList" :key="idx" class="dialog_sec flex">
        <view class="dialog_vol">
            <image :src="item.zyz_avatar?item.zyz_avatar:'/static/images/defaultorg.png'"></image>
            <view class="star_wrapper flex" v-if="item.zyz_star">
                <view v-for="(item, index) in tools.star(item.zyz_star)" :key="index" class="star">
                    <image src="/static/images/icon_star.png"></image>
                </view>
            </view>
        </view>
        <view class="dialog_detail">
            <view class="dialog_item">
                <view class="name">{{item.zyz_name?item.zyz_name:''}}<text>{{tools.dealTimeToRelativeStr(item.create_time)}}</text>
                </view>
                <view class="txt">{{item.content}}</view>
            </view>
            <view v-for="(subItem, subIdx) in item.sub" :key="subIdx" class="sub_dialog_sec flex">
                <view class="sub_dialog_vol">
                    <image :src="subItem.zyz_avatar?subItem.zyz_avatar:'/static/images/defaultorg.png'"></image>
                    <view class="star_wrapper flex" v-if="subItem.zyz_star">
                        <view v-for="(item, index) in tools.star(subItem.zyz_star)" :key="index" class="star">
                            <image src="/static/images/icon_star.png"></image>
                        </view>
                    </view>
                </view>
                <view class="sub_dialog_item">
                    <view class="name">{{subItem.zyz_name?subItem.zyz_name:' '}}<text>{{tools.dealTimeToRelativeStr(subItem.create_time)}}</text>
                    </view>
                    <view class="txt">
                        <view class="reply" v-if="subItem.pid_zyz_name!==item.zyz_name">回复@<text>{{subItem.pid_zyz_name}}：</text>
                        </view>
            {{subItem.content}}
          </view>
                </view>
            </view>
        </view>
    </view>
</view>
<view class="no_dialog">没有更多数据</view>
<view class="pad_bottom"></view>
<view class="fixed_view">
    <view class="remain_time">（{{detailObj.deadline}}）</view>
    <view @tap="toSignUp" :class="'btn apply_btn' + (btnDisabled?' disabled_btn':'')" v-if="!isSignUp&&!cannotSign">我要报名</view>
    <view class="btn cancel_btn" v-if="isSignUp&&!cannotSign">我已报名</view>
</view>
</view>
</template>

<script module="tools" lang="wxs" src="../../utils/tools.wxs"></script>

<script>
	import {joinActivity} from '@/api/activityManage';
var t = require("../../utils/request.js"),
    e = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
    a = require("../../utils/util.js"),
    app = getApp(),
    n = e.default.recruitDetail,
		recruitList = e.default.recruitList,
    o = e.default.messageList,
    s = e.default.recruitSignUp,
    r = e.default.recruitCancelSign,
		orgDetailApi = e.default.orgDetail;

export default {
  data() {
    return {
      dialogList: [],
      id: "",
      detailObj: null,
      isSignUp: false,
      cannotSign: !1,
      btnDisabled: !1
    };
  },

  components: {},
  props: {},
  onLoad: function (t) {
    t.id ? (this.setData({
      id: t.id
    }), this.getRecruitDetail()) : uni.navigateBack();
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {
    this.getRecruitDetail("refresh");
  },
  onReachBottom: function () {},
  onShareAppMessage: function (t) {
    return {
      title: this.detailObj.name,
      path: "/pages/index/index?recruitId=" + this.id,
      imageUrl: this.detailObj.thumb
    };
  },
  methods: {
		isAlreadySignUp: function() {
			var params = {
				data: {
					api: recruitList,
					pageNo: this.page,
					pageSize: this.pageSize,
					uid: app.globalData.zyzId,
					x: app.globalData.longitude,
					y: app.globalData.latitude,
				}
			};
			return (0, t.request)(params, "normal", !0);
		},
    toSignUp: function () {
      var t = this;
      app.globalData.loginFlag ? this.btnDisabled || (this.setData({
        btnDisabled: !0
      }), uni.showModal({
        content: "确定报名吗？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "立即报名",
        confirmColor: "#24CBA9",
        success: function (e) {
          e.confirm && t.signUpRequest().then(function (e) {
            e.success ? (t.getRecruitDetail(), t.setData({
              btnDisabled: !1
            }), uni.navigateTo({
            	url: '/pages/team/success'
            })) : uni.showToast({
              title: e.data.message,
              icon: "none",
              success: function () {
                t.setData({
                  btnDisabled: !1
                });
              }
            });
          }), e.cancel && t.setData({
            btnDisabled: !1
          });
        }
      })) : uni.showModal({
        title: "温馨提示",
        content: "您还未登录，立即登录？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "去登录",
        confirmColor: "#24CBA9",
        success: function (t) {
          t.confirm && uni.navigateTo({
            url: "/pages/entry/login"
          });
        }
      });
    },
    toCancelSign: function () {
      var t = this;
      uni.showModal({
        content: "确定取消报名吗？",
        showCancle: !0,
        cancelText: "再看看",
        cancelColor: "#333333",
        confirmText: "立即取消",
        confirmColor: "#24CBA9",
        success: function (e) {
          e.confirm && t.cancelSignRequest().then(function (e) {
            e.data.errCode === a.ERR_OK && t.getRecruitDetail();
          });
        }
      });
    },
	getOrgDetail: function(orgId) {
		var params = {
			data: {
				api: orgDetailApi,
				id: orgId,
				contentType: 'application/x-www-form-urlencoded',
			}
		};
		return (0, t.request)(params, "normal", !0);
	},
	getActivityType: function() {
		var params = {
		  data: {
		    code: "zq_activity_type"
		  }
		};
		return (0, t.request)(params, "dict", !1);
	},
	getRecruitDetail: function () {
			console.log(this.id);
      var e = this;
      var o = {
        data: {
          api: n,
          id: e.id,
					contentType: 'application/x-www-form-urlencoded'
        },
				method: 'get',
      };
      (0, t.request)(o, "normal", !0).then(function (t) {
        if (t.data.success) {
          var i = t.data.data,
              n = new Date().getTime(),
              o = !1;

          i.recruit_start_time = new Date(i.startTime).getTime();
          i.recruit_finish_time = new Date(i.endTime).getTime();
          if (i.recruit_start_time > n) {
            var s = (0, a.calcLastTime)(i.recruit_start_time),
                r = s.day,
                c = s.hour;
            0 == r && c > 0 ? i.deadline = c + "小时" : r > 0 ? i.deadline = r + "天" + (c > 0 ? c + "小时" : "") : 0 == r && 0 == c && (i.deadline = "0天"), o = !0, i.deadline += "后开始";
          } else {
            var d = (0, a.calcLastTime)(i.recruit_finish_time),
                l = d.day,
                u = d.hour;
            i.deadline = "剩余", 0 == l && u > 0 ? i.deadline += u + "小时" : l > 0 ? i.deadline += l + "天" + (u > 0 ? u + "小时" : "") : 0 == l && 0 == u && (i.deadline += "0天", o = !0), i.deadline += "截止";
          }

          i.startTime = (0, a.formatTimeTwo)(i.recruit_start_time, "Y.M.D"), i.finishTime = (0, a.formatTimeTwo)(i.recruit_finish_time, "Y.M.D");
          var g = (0, a.bMapTransQQMap)(i.xcoordinate, i.ycoordinate);
          i.posiitonQQMap = g;
					i.thumb = i.imageUrl ? i.imageUrl : "/static/images/defaultorg.png";
					i.users = [];
					e.getOrgDetail(i.orgId).then(function(result) {
						if (result.data.success) {
							i.orgName = result.data.data.name;
						}
					}); // , e.messageListRequest();
		  
					if (app.globalData.zyzId) {
						e.isAlreadySignUp().then(function(result) {
							if (result.data.success) {
								e.isSignUp = result.data.data.rows.length != 0;
							}
						});
					}
			    

					e.getActivityType().then(function(result) {
						if (result.data.success) {
							for (var loop = 0; loop < result.data.data.length; loop++) {
								if (result.data.data[loop].code == i.type) {
									i.category = result.data.data[loop].value;
									break;
								}
							}
							
							e.setData({
								detailObj: i,
								cannotSign: o
							});
						}
					});
		  
        }

        uni.showToast({
          title: t.data.message,
          icon: "none"
        });
      });
    },
    messageListRequest: function () {
      var e = {
        url: o,
        data: {
          page: 1,
          pagesize: 5,
          zyzid: app.globalData.zyzId,
          type: "recruit_activity",
          type_id: this.id
        }
      };
      return (0, t.request)(e, "", !1, "app");
    },
    signUpRequest: function () {
			return joinActivity({aid: this.id, uid: app.globalData.zyzId});
    },
    cancelSignRequest: function () {
      var e = {
        data: {
          api: r,
          id: this.id,
          zyzid: app.globalData.zyzId
        }
      };
      return (0, t.request)(e, "common", !0);
    },
    toOrgDetail: function (t) {
      var e = t.currentTarget.dataset,
          a = e.deptId;
      "中国" !== e.deptName && uni.navigateTo({
        url: "/pages/org/detail?id=" + a
      });
    },
    makePhoneCall: function (t) {
      console.log(t), uni.makePhoneCall({
        phoneNumber: t.currentTarget.dataset.mobile
      });
    },
    openLocation: function (t) {
      console.log(t);
      var e = t.currentTarget.dataset.position,
          a = e.lng,
          i = e.lat;
      uni.openLocation({
        latitude: i,
        longitude: a,
        scale: 14,
        name: t.currentTarget.dataset.nameTxt,
        address: t.currentTarget.dataset.address,
        success: function () {}
      });
    },
    allVols: function () {
      uni.navigateTo({
        url: "/pages/act/detail-vols?id=" + this.id
      });
    }
  }
};
</script>
<style>
.thumb {
    position: relative;
    width: 100%;
    height: 450rpx;
    margin-bottom: 40rpx;
}

.thumb image {
    width: 100%;
    height: 100%;
    border: 1rpx solid #e1e2e3;
}

.thumb .tag {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
    min-width: 144rpx;
    height: 48rpx;
    line-height: 48rpx;
    padding: 0 20rpx;
    text-align: center;
    background: #24cba9;
    border-radius: 24rpx;
    font-size: 28rpx;
    color: #fff;
}

.title {
    width: 100%;
    height: auto;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
}

.time_num {
    justify-content: space-between;
    padding: 0 30rpx 40rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.time_num .time {
    flex: auto;
    font-size: 24rpx;
    color: #333;
}

.time_num .over {
    display: inline-block;
    width: 76rpx;
    height: 32rpx;
    line-height: 32rpx;
    margin-left: 6rpx;
    vertical-align: middle;
}

.time_num .num {
    flex: none;
    font-size: 24rpx;
    color: #333;
}

.time_num .num text {
    color: #24cba9;
}

.desc_item {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    justify-content: flex-start;
}

.desc_item .icon {
    flex: 0 0 40rpx;
    width: 40rpx;
    height: 40rpx;
    margin: 0 30rpx;
}

.desc_item view {
    position: relative;
    flex: auto;
    height: 100rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.desc_item view text {
    display: inline-block;
    width: 550rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.desc_item view .arr {
    width: 10rpx;
    height: 15rpx;
}

.desc_item view .arr,.desc_item view .fun_icon {
    position: absolute;
    top: 50%;
    right: 30rpx;
    transform: translateY(-50%);
}

.desc_item view .fun_icon {
    width: 36rpx;
    height: 36rpx;
}

.content {
    width: 100%;
    height: auto;
    padding: 40rpx 30rpx;
}

.content .tit {
    margin-bottom: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
}

.content .tit .sub {
    position: relative;
    top: -15rpx;
    margin-left: 10rpx;
    font-size: 24rpx;
}

.content .tit .more {
    float: right;
    font-size: 24rpx;
    color: #333;
}

.content .tit .more image {
    width: 10rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.content .border_sec {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30rpx;
    background: #fafffe;
    box-shadow: 0rpx 4rpx 12rpx 0rpx hsla(0,0%,88.2%,.5);
    border-radius: 20rpx;
    border: 1rpx solid #24cba9;
}

.border_sec .quot {
    position: absolute;
    top: -16rpx;
    right: 30rpx;
    display: block;
    width: 32rpx;
    height: 26rpx;
}

.content .no_data {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 0;
}

.content .no_data image.no_data1 {
    display: block;
    width: 72rpx;
    height: 76rpx;
    margin: 0 auto 15rpx;
}

.content .no_data image.no_data2 {
    display: block;
    width: 80rpx;
    height: 72rpx;
    margin: 0 auto 15rpx;
}

.content .no_data text {
    font-size: 24rpx;
    color: #999;
}

.content rich-text img {
    width: 100%;
    height: auto;
}

.pad_bottom {
    width: 100%;
    height: 158rpx;
    background: #f4f4f4;
}

.fixed_view {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 148rpx;
    background: #fff;
    box-shadow: 0rpx -10rpx 20rpx 0 rgba(0,0,0,.05);
}

.fixed_view .remain_time {
    padding: 16rpx 0;
    text-align: center;
    font-size: 20rpx;
    color: #666;
}

.fixed_view .btn {
    width: 92%;
    height: 80rpx;
    margin: 0 auto;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #fff;
}

.fixed_view .btn.apply_btn {
    background: #24cba9;
}

.vols_wrapper {
    justify-content: flex-start;
    width: 100%;
    height: 90rpx;
}

.vols_wrapper .vols_item {
    position: relative;
    flex: 0 0 90rpx;
    width: 90rpx;
    height: 90rpx;
    margin-right: 30rpx;
}

.vols_item image.headimg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.vols_item .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 24rpx;
    background: #fff;
    border-radius: 12rpx;
    border: 1rpx solid #e1e2e3;
}

.star_wrapper .star {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 12rpx;
    margin-right: 4rpx;
    font-size: 0;
}

.star_wrapper .star:last-child {
    margin-right: 0;
}

.star_wrapper .star image {
    display: block;
    width: 12rpx;
    height: 12rpx;
}

.dialog_sec {
    width: 100%;
    height: auto;
    justify-content: flex-start;
}

.dialog_sec+.dialog_sec {
    margin-top: 30rpx;
}

.dialog_sec .dialog_vol {
    position: relative;
    flex: 0 0 72rpx;
    width: 72rpx;
    height: 72rpx;
    margin-right: 18rpx;
    align-self: flex-start;
}

.dialog_vol image {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
}

.dialog_vol .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72rpx;
    height: 20rpx;
    background: #fff;
    border: 1rpx solid #e1e2e3;
    border-radius: 10rpx;
}

.dialog_vol .star_wrapper .star {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 12rpx;
    margin-right: 2rpx;
}

.dialog_sec .dialog_detail {
    flex: auto;
    height: auto;
}

.dialog_detail .dialog_item {
    width: 100%;
    height: auto;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.dialog_item .name,.sub_dialog_item .name {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
}

.dialog_item .name text,.sub_dialog_item .name text {
    display: inline-block;
    margin-left: 30rpx;
    font-size: 24rpx;
    color: #999;
}

.dialog_item .txt,.sub_dialog_item .txt {
    font-size: 28rpx;
}

.dialog_detail .sub_dialog_sec {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e1e2e3;
}

.sub_dialog_sec .sub_dialog_vol {
    position: relative;
    flex: 0 0 52rpx;
    width: 52rpx;
    height: 52rpx;
    margin-right: 18rpx;
    align-self: flex-start;
}

.sub_dialog_vol image {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
}

.sub_dialog_vol .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52rpx;
    height: 14rpx;
    background: #fff;
    border: 1rpx solid #e1e2e3;
    border-radius: 7rpx;
}

.sub_dialog_vol .star_wrapper .star {
    flex: 0 0 8rpx;
    width: 8rpx;
    height: 8rpx;
    margin-right: 2rpx;
}

.sub_dialog_vol .star_wrapper .star image {
    width: 8rpx;
    height: 8rpx;
}

.sub_dialog_item .txt .reply {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.no_dialog {
    width: 100%;
    height: 100rpx;
    background: #f4f4f4;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color: #b4b4b4;
}
</style>